import React, {useState, useEffect} from 'react';
import {Row, Col, Card} from 'antd';
import CommonSearchBar from '~/page/FineBi/common/CommonSearchBar';
import {querySelectOptions} from '~/service/refundReport';
import {convertSearcherParams} from '~/page/FineBi/utils/convert';

import DataText from '~/page/FineBi/common/DataText';
import DataCard from '../DataCard';
import StudentChart from '../StudentPieChart';

const SELECT_UNIT_ID = 'selectUnit_14';
const dIdPre = 'structureStudentsOnePart_partOne';
const searchConfig = [
    {
        type: 'select',
        key: 'school_term_id',
        label: '学季',
        optionsConfig: {
            options: [],
            pager: {}
        },
        props: {
            mode: 'multiple'
        }
    },
    {
        type: 'select',
        key: 'subject_name_lvl1',
        label: '学部',
        optionsConfig: {
            options: [],
            pager: {}
        },
        props: {
            mode: 'multiple'
        }
    }
];
const GradeStructure = () => {
    const [selectOptions, setSelectOptions] = useState({});
    // 共同查询条件
    const [dimensionAndValues, setDimensionAndValues] = useState([]);

    const handleOk = fieldsValue => {
        const params = convertSearcherParams(fieldsValue);
        setDimensionAndValues(params);
    };

    const handleReset = e => {
        setDimensionAndValues([]);
    };

    // 选项查询
    const handleFetchOptions = options => {
        const {key, searchKey, pager, isGetingMore, options: curOptions, fieldsValue} = options;
        let permissions = searchConfig.map(item => ({
            dimensionId: `${dIdPre}_${item.key}`,
            dimensionName: item.key,
            filterItems: Array.isArray(fieldsValue[item.key])
                ? fieldsValue[item.key]
                : fieldsValue[item.key] == null
                    ? []
                    : [fieldsValue[item.key]]
        }));

        permissions = permissions.filter(item => item.filterItems?.length);

        const params = {
            pager,
            dimensionId: `${dIdPre}_${key}`,
            dimensionName: key,
            searchKey,
            permissions,
            unitId: SELECT_UNIT_ID
        };

        querySelectOptions(params).then(res => {
            const {data, pager} = res;
            let options =
                data.map(item => ({
                    key: item,
                    value: item,
                    label: item
                })) || [];
            // 分页时，累加展示
            if (isGetingMore) {
                options = curOptions.concat(options);
            }
            setSelectOptions({key, options, pager});
        });
    };

    return (
        <div>
            <Card style={{marginBottom: 8}}>
                <CommonSearchBar
                    noCache
                    config={searchConfig}
                    initialValues={{}}
                    onOk={handleOk}
                    onReset={handleReset}
                    onfetchOptions={handleFetchOptions}
                    selectOptions={selectOptions}
                />
            </Card>
            <Card>
                <DataText
                    dId="structureStudentsOnePart_partFour"
                    unitId="structureStudentsOnePart_partFour_text_1"
                />
                <Row>
                    <Col span={12}>
                        <DataCard dId="structureStudentsOnePart_partOne" dimensionAndValues={dimensionAndValues} />
                    </Col>
                    <Col span={12}>
                        <DataCard dId="structureStudentsOnePart_partTwo" dimensionAndValues={dimensionAndValues} />
                    </Col>
                    <Col span={24}>
                        <StudentChart
                            dId="structureStudentsOnePart_partThree"
                            unitId="structureStudentsOnePart_partThree_pie_1"
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                </Row>
            </Card>
        </div>
    );
};

export default GradeStructure;
